<template>
  <div ref="pieRef" class="visit-app" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from "echarts";
import { mapState } from "vuex";

export default {
  data() {
    return {
      chartInstance: null,
      option: {
        color: ["#ff5f87", "#ffc652", "#2888ff", "#00dee0","#ff9f7f"],
        tooltip: {
          trigger: "item",
          textStyle: {
            align: "left",
          },
        },
        legend: {
          show: false,
          top: "center",
          right: "1%",
          orient: "vertical",
          textStyle: {
            color: "#fff",
          },
          icon: "circle",
        },
        series: [
          {
            name: "事件总数",
            type: "pie",
            startAngle: 270,
            center: ["50%", "50%"],
            radius: ["30%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: "outside",
              textBorderWidth: "0",
              color: "#BFD9FF",
              formatter: (params) => {
                return params.value;
              },
            },
            labelLine: {
              show: true,
              length: 5,
              length2: 10,
              minTurnAngle: 180,
              maxSurfaceAngle: 180,
            },
            emphasis: {
              label: {
                show: true,
              },
            },
            data: [
              { value: 0, name: "管理员行为异常" },
              { value: 0, name: "用户行为异常" },
              { value: 0, name: "网络服务异常" },
              { value: 0, name: "网络边界异常" },
            ],
          },
        ],
      },
    };
  },
  computed: {
    ...mapState(["theme"]),
  },
  methods: {
    initChart() {
      // 初始化对象
      this.chartInstance = echarts.init(this.$refs.pieRef, this.theme);
      this.chartInstance.setOption(this.option, true);
      let _self = this;
      this.chartInstance.on("click", function (params) {
        _self.$emit("handlePieClick", params);
      });
    },
    getData(params) {
      this.option.series[0].data = params;
      this.chartInstance.setOption(this.option, true);
    },
  },
  mounted() {
    this.initChart();

    // 添加随页面变化而变化
    window.addEventListener("resize", () => {
      this.chartInstance.resize();
    });
  },
  destroyed() {
    window.removeEventListener("resize", () => {
      this.chartInstance.resize();
    });
  },
  watch: {
    theme(newValue, oldValue) {
      this.chartInstance.dispose();
      this.initChart();
    },
  },
};
</script>

<style lang="scss" scoped>
.visit-app {
  width: 100%;
  height: 80%;
}
</style>
